<template>
    <div class="gjgzcx_wrap">
        <div class="page-content">
            <div class="tab-box">
                <span :class="`is_hover ${ tabActIndex === 1 ? 'is_act' : '' }`" @click="tabClick( 1 )">实时报警</span>
                <span :class="`is_hover ${ tabActIndex === 2 ? 'is_act' : '' }`" @click="tabClick( 2 )">历史报警</span>
            </div>

            <div class="top-panel">
                <div class="chart-box" ref="barChart"></div>
            </div>

            <div class="bottom-panel">
                <div v-if="tabActIndex===2">
                    <div class="date-box">
                        <span class="date-text">时间范围：</span>
                        <el-date-picker
                                v-model="startTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="选择日期时间">
                        </el-date-picker>

                        <img class="date-img" src="../../assets/images/gjgzcx/icon_arrow.png" alt="" />

                        <el-date-picker
                                v-model="endTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="选择日期时间">
                        </el-date-picker>

                    </div>

                    <div class="btn-group">
                        <el-button class="hy_btn" @click="resetInfo()"><img src="../../assets/images/gjgzcx/icon_reset.png" alt="">重置</el-button>
                        <el-button class="hy_btn is_primary"
                                   type="primary"
                                   @click="getTableData()"
                        >
                            <img src="../../assets/images/gjgzcx/icon_add.png" alt="">查询
                        </el-button>
                    </div>

                </div>

                <div class="table-box">
                    <el-table
                            :data="tableData"
                            class="hy_table"
                    >
                        <el-table-column
                                type="index"
                                label="No."
                                align="center"
                                width="100px">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                width="160px"
                                label="告警类型">
                            <template slot-scope="scope">
                                <span>{{ scope.row.logType !== 'warning' ? '故障' : '告警' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="发生时间">
                            <template slot-scope="scope">
                                <span>{{ scope.row.LtimeStamp | formatNowDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="logSource"
                                label="设备名称">
                        </el-table-column>
                        <el-table-column
                                prop="alertName"
                                label="告警名称">
                            <template slot-scope="scope">
                                <span>{{ scope.row.logSource }}{{ scope.row.logType !== 'warning' ? '故障' : '告警' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="level"
                                label="告警等级">
                            <template slot-scope="scope">
                                <span>{{ scope.row.logLevel === 'urgent' ? '紧急' : scope.row.logLevel === 'important' ? '重要' : scope.row.logLevel === 'secondary' ? '次要' : '提示' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="logEvent"
                                label="告警详情">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabActIndex: 1,
                startTime: new Date(),
                endTime: new Date(),
                tableData: [],
            }
        },
        methods: {
            resetInfo() {
                this.startTime = this.formatDate('YYYY-mm-dd', new Date( this.startTime )) + ' 00:00:00';
                this.endTime = new Date();

                this.getTableData();
            },

            getChartData() {
                this.$api.queryWarningStats(
                    {}
                ).then(( res )=> {
                    var names = [];
                    var value = [[], []];
                    var data = res || [];

                    for ( var i=0; i<data.length; i++ ) {
                        names.push( data[i].hour > 9 ? (data[i].hour +':00') : ('0' + data[i].hour +':00') )
                        value[0].push( data[i].errors );
                        value[1].push( data[i].warnings );
                    }

                    console.log("getChartData==>",res)

                    this.barChartLoad(
                        {
                            names: names,
                            value: value,
                            id: 'barChart',
                            legend: ['故障信息', '告警信息', ],
                            title: '今日告警信息统计',
                        }
                    );
                })
            },

            getTableData() {
                if( window.getTableDataTimer ) {
                    clearTimeout( window.getTableDataTimer );
                    window.getTableDataTimer = null;
                }

                if( this.tabActIndex === 2 ) {
                    this.$api.queryLog(
                        {
                            "type": [
                                "warning",
                                "error"
                            ],
                            "range": {
                                "gte": this.formatDate('YYYY-mm-dd HH:MM:SS', new Date( this.startTime )),
                                "lte": this.formatDate('YYYY-mm-dd HH:MM:SS', new Date( this.endTime )),
                            },
                            "pageSize": 20,
                            "current": 0
                        }
                    ).then(( res )=> {
                        this.tableData = res.results || [];
                    })

                    return;
                }

                this.$api.queryWarningLog(
                    {
                        current: 0,
                        pageSize: 20,
                    }
                ).then(( res )=> {
                    this.tableData = res.results || [];

                    window.getTableDataTimer = setTimeout(()=> {
                        this.getTableData();
                    }, 20*1000)
                })
            },

            tabClick( index ) {
                this.tableData = [];
                this.tabActIndex = index;
                this.getTableData();
            },

            barChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '0%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        }
                    },
                    grid: {
                        top: '23%',
                        right: '1%',
                        bottom: '1%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',//鼠标移动上去的样式，有line和shadow两种
                        },
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '0%',
                        top: '0%',
                        icon: 'circle',
                        itemGap: 25,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                        },
                    },
                    color: ['#2C50EE','#35C759'],
                    xAxis: [
                        {
                            type: 'category',
                            // boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[1],
                        },
                    ],
                };

                chart.setOption( option );
            },
        },
        mounted() {
            this.startTime = this.formatDate('YYYY-mm-dd', new Date( this.startTime )) + ' 00:00:00';
            this.getChartData();
            this.getTableData();
        },
        destroyed() {
            if( window.getTableDataTimer ) {
                clearTimeout( window.getTableDataTimer );
                window.getTableDataTimer = null;
            }
        },
    }
</script>

<style lang="less">
    .gjgzcx_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;

            >.tab-box {
                width: 220px;
                height: 32px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #CFD1D8;
                box-sizing: border-box;
                margin-bottom: 35px;

                >span {
                    display: inline-block;
                    width: 109px;
                    height: 32px;
                    line-height: 30px;
                    text-align: center;
                    position: relative;
                    top: -1px;
                    box-sizing: border-box;
                    color: #9A9FAF;


                    &.is_act {
                        background: #FFFFFF;
                        border-radius: 4px;
                        border: 1px solid #2C50EE;
                        font-weight: 600;
                        color: #2C50EE;

                        &:nth-of-type(1) {
                            left: -1px;
                        }

                        &:nth-of-type(1) {
                            right: -1px;
                        }
                    }
                }
            }

            >.top-panel {
                width: 100%;
                height: 340px;
                background: #FFFFFF;
                border-radius: 8px;
                margin-bottom: 28px;
                padding: 40px;
                box-sizing: border-box;

                >.chart-box {
                    width: 100%;
                    height: 100%;
                }
            }

            >.bottom-panel {
                width: 100%;
                min-height: 340px;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 28px;
                box-sizing: border-box;
                position: relative;

                .date-box {
                    margin-bottom: 40px;

                    >.date-text {
                        font-size: 16px;
                        font-weight: 600;
                        color: #0E1526;
                        line-height: 36px;
                    }

                    >.el-date-editor {
                        width: 200px;

                        .el-input__inner {
                            height: 36px;
                            line-height: 36px;
                            background: #FFFFFF;
                            border-radius: 2px;
                            border: 1px solid #CFD1D8;
                            font-size: 14px;
                            color: #9A9FAF;
                        }

                        .el-input__icon {
                            line-height: 36px;
                            color: #9A9FAF;
                        }
                    }

                    >.date-img {
                        margin:  0 20px;
                    }
                }

                .btn-group {
                    position: absolute;
                    right: 28px;
                    top: 28px;

                    .el-button {

                        img {
                            position: relative;
                            top: -0.1px;
                        }
                    }

                    .el-button.hy_btn + .el-button.hy_btn {
                        margin-left: 16px;
                    }
                }

                .table-box {
                    /*margin-top: 40px;*/
                }
            }
        }
    }
</style>
